<template>
    <!-- 坐席分配情况弹窗 -->
    <drag-modal  :visible="visible" :title="modalTitle" @cancel="onModalClose" width="500px" >
        <div class="form-search-wrapper" style="min-height:200px;">
            <div class="box-content">
                <div class="box">
                    <div>
                        <p>首次购买需要缴纳保证金1000元。</p>
                        <p>保证金是为了保证话术规范，如客户将此号码投诉</p>
                        <p>到工信部网站，保证金不退还。如未投诉，使用期满后退还。</p>
                    </div>
                    <div>
                        <a-button type="primary" @click="addDeposit">{{selectButtonTitle}}</a-button>
                    </div>
                </div>
            </div>
        </div>
    </drag-modal>
</template>

<script>
import { mapState } from "vuex";
import {  getByCompany as getAccount ,addDeposit} from "@/api/expenses/expensesAccount";

export default {
    data () {
        return {
            accountData: {
                balance: 0.00
            },                    //账户余额
            visible: false,
            modalTitle:"缴纳保证金",
            selectButtonTitle:"缴纳",

        };
    },
    created(){
        
    },
    mounted(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        reLoadData(){
            this.getAccount();
        },
        onModalOpen(openData){
            Object.assign(this,openData);
            this.visible = true;
            this.reLoadData();
        },
        onModalClose(){
            this.visible = false;
        },
       //获取账户余额
        getAccount(){
            getAccount().then(response => {
                if (response.code === 200) {
                   this.accountData = response.data;
                   console.log("获取账户余额",this.accountData);
                } 
            });
        },
        addDeposit(){
            let _this = this;
            this.$confirm({
                title: '确认',
                content: <span>保证金将从可用余额中扣除？</span>,
                onOk () {
                     addDeposit().then(response => {
                        if (response.code == 200) {
                            _this.$message.success("扣除成功");
                            _this.onModalClose();
                            _this.$emit("callBack"); 
                        }
                    });
                },
                onCancel () { },
            });
        },
    }
};
</script>

<style lang="less" scoped>
    // 头部
    .header{
        padding: 15px 20px;
        .title{
            font-weight: 700;
            font-size: 20px;
        }
        .bt{
            margin-left: 10px;
        }
    }

</style>